<template>
    <section class="area_manage_form">
    	<el-form ref="form" :model="form" :rules="rules" label-width="120px" >
			<div class="quyu_all" v-if="quyuORtongdao==='quyu' && Tongdaolist.length!=0" >
				<p class="quyu_all_p">区域关联的包通道</p>
				<div class="quyu_item" v-for="(item,index) in Tongdaolist">
					<ul >
						<li><span class="quyu_item_title">名称：</span><span class="quyu_item_text">{{item.name}}</span></li>
						<li><span class="quyu_item_title">类型：</span><span class="quyu_item_text" v-if="item.type===1">接口</span><span v-if="item.type===2" class="quyu_item_text">FTP</span></li>
						<li><span class="quyu_item_title">A端区域：</span><span class="quyu_item_text">{{item.aaAddress}}</span></li>
						<li><span class="quyu_item_title">B端区域：</span><span class="quyu_item_text">{{item.bbAddress}}</span></li>
					</ul>
				</div>
			</div>
            <el-form-item :label="item.label" :prop='item.modelData'  v-for="(item,index) in formLabel" :key="index" v-if="type!='detail'">
                <el-input :style="{'width':item.diyWidth}"  
                    :disabled = "item.show==='disabled'"
                    v-if="item.type==='input' && quyuORtongdao!='quyu'"
                    v-model="form[item.modelData]" 
                    :placeholder="item.placehold">
                </el-input>{{item.inputAfter}}
                <el-select :style="{'width':item.diyWidth}"   v-if="item.type==='select'" 
                    v-model="form[item.modelData]" 
                    @change="emitSelectType">
                    <el-option
                        v-for="optionsItem in item.options"
                        :key="optionsItem.id"
                        :label="optionsItem.name"
                        :value="optionsItem.id">
                    </el-option>
                </el-select>
                <el-input  v-if="item.type==='textarea'" type="textarea" v-model="form[item.modelData]"></el-input>
                <el-radio-group  v-if="item.type==='radioGroup'" v-model="form[item.modelData]">
                    <el-radio-button :label="radiositem.id" v-for="(radiositem,	radiosindex) in item.radios">{{radiositem.name}}</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form ref="form1" :model="form2" label-width="120px" >
                <el-form-item :label="item.name"  v-for="(item,index) in Tongdaolist" :key="index" v-if="type!='detail' && quyuORtongdao==='quyu'">
        			<el-input style="width: 250px;" type="number" v-model="item.status"  placeholder="请输入通道权重值"></el-input>
                </el-form-item>
            </el-form>
            <el-form-item v-if="type!='detail'">
                <el-button type="primary" v-if="type==='add' && quyuORtongdao !='quyu'" @click="onSubmit('form')">确定</el-button>
                <el-button type="primary" v-if="quyuORtongdao==='quyu'" @click="peizhiSubmit">确定</el-button>
                <el-button type="primary" v-if="type==='updata'" @click="onUpdata">确定</el-button>
                <el-button @click = "cancel('form')">取消</el-button>
            </el-form-item>
            <el-form-item  :label="item.label+'：'"  v-for="(item,index) in formData"  v-if="type==='detail'">
                {{item.value}}
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
    import {
    	computedGetAreaDetail3
    } from "../css_js_img/computedareaResource"
    export default {
    	props:{
	  		type:{
	  			type:String,
	  			default:'add'
	  		},
	  		detailId:Number	,
	  		content:'',
	  		formLabel:Array,
	  		formData:Array,
	  		cleanData:Boolean,
	  		formUpdata:Object,
	  		quyuORtongdao:{
	  			type:String,
	  			default:'tongdao'
	  		},
	  		Tongdaolist:{
	  			type:Array,
	  			default:[]
	  		}
	  		
  		},
        data() {
          return {
          	form:{},
          	form2:{},
          	dbType:'',
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                ],
                memory: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                ],
                cpuNum: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                ],
                diskSize: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
                ],
                segment:[
                    { required: true, message: '请选择网段', trigger: 'change' }
                ],
                aaAreaId: [
                    { required: true, message: '请选择区域', trigger: 'change' }
                ],
                bbAreaId: [
                    { required: true, message: '请选择区域', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择区域', trigger: 'change' }
                ],
                aaAddress: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                bbAddress: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
            }
     
          };
        },
        methods: {
        	onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
//                      this.$message({
//                        message: '注册成功',
//                        type: 'success'
//                      });
                        this.$emit('insertData',this.form);
                        this.$emit('dialogVisible1Cancel');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
        	},
        	emitSelectWangduan(val){
        		console.log(val);
        		this.$emit('emitSelectWangduan',val)
        	},
        	peizhiSubmit(){
                this.quyuORtongdao = '';
        		this.$emit('peizhiSubmit',{list:this.Tongdaolist,form:this.form});
        	},
        	emitSelectType(val){
        		console.log(val);
        		if(val===1){
        			this.dbType ='db'	
        		}else{
        			this.dbType ='ftp'	
        		}
        	},
        	onUpdata(){
        		console.log(this.formUpdata);
        		this.$emit('UpdataData',this.formUpdata)
        	},
            cancel(formName){
                this.$refs.form.resetFields();
                console.log(this.$refs.form.resetFields)
                this.$emit('dialogVisible1Cancel');
                console.log(formName)
            }
        },
        mounted(){
        	if(this.type==='updata'){
				console.log(this.formUpdata)
        		this.form = this.formUpdata;
        	}
        },
        watch:{
        	type(newVal){
        		if(newVal==='updata'){
        			this.form = this.formUpdata;
        		}else if(newVal==='add'){
                    this.form = {};
                }
        		console.log(this.form);
        	},
        	cleanData(newVal){
        		Object.assign(this.$data, this.$options.data())/*重置data数据*/
        	}
        }
  };
</script>

<style scoped="scoped">
	.ceshi span{
		margin: 0 17px 0 15px;
	    display: inline-block;
	    width: 110px;
	    background: #5a8bff;
	    text-align: center;
	    height: 30px;
	    line-height: 30px;
	    border-radius: 30px;
	    color: #fff;
	    margin-bottom: 15px
	}
	.quyu_item{
	      display: inline-block;
		    /* width: 170px; */
		    /* list-style: none; */
		    /* height: 130px; */
		    border: solid 1px #E0E0DD;
		    border-radius: 10px;
		    font-size: 15px;
		    text-align: left;
		    margin: 10px;
		    padding: 0 10px 0 10px;
	}
	.quyu_item  span.quyu_item_title {
	    color: #949494;
	}
	.quyu_item  li {
	    list-style: none;
	    margin: 8px 0;
	}
	.quyu_all{
		padding: 0 0 15px 0;
		border-bottom: solid 1px #E0E0DD;
		margin-bottom: 20px;
	}
	.quyu_all_p {
		    font-size: 16px;
   		 	margin: 10px 0;
	}
</style>